<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Bem-vindo ao Players.com</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type='text/javascript' src='lib/knockout-2.2.1.js'></script>
		<script src="lib/jquery-1.9.1.js"></script>
		<script src="lib/jquery-ui.js"></script>
		<link rel="stylesheet" type="text/css" href="style/style.css">
	</head>
	<body>
		<div id="main" style="">
			<div id="cabecalho">
				<h1>Players.com</h1>
			</div>
			<div style="width: 700px;">
				<p id='mensagens' style="display: none; top: 5%;"></p>
				<div class="areaCampos" id='validaLogin'>
					<h2>Entrar</h2>
					<p>
						<label>Login:</label>
						<input id='nomeLogin' data-bind="value: nomeLogin" />
					</p>
					<p>
						<label>Senha:</label>
						<input id='senhaLogin' type="password" data-bind="value: senhaLogin" />
					</p>
					<button data-bind='click: abrirModalCadastroPlayer'>Cadastre-se</button>
					<button data-bind='click: validarLogin'>Entrar</button>
				</div>
			</div>
			<div id="mainModalCadastroPlayer">
				<p id='mensagens' style="display: none; top: 5%;"></p>
				<div class="areaCampos" id='modalCadastroPlayer' >
					<h2>Cadastro</h2>
					<p>
						<label>Apelido:</label>
						<input id='apelidoPlayer' data-bind="value: apelidoPlayer" />
					</p>
					<p>
						<label>Nome:</label>
						<input id='nomePlayer' data-bind="value: nomePlayer" />
					</p>
					<p>
						<label>Email:</label>
						<input id='emailPlayer' data-bind="value: emailPlayer" />
					</p>
					<p>
						<label>Senha:</label>
						<input type="password" id='senhaPlayer' data-bind="value: senhaPlayer" />
					</p>
					</br>
					</br>
					<button data-bind='click: cadastrarPlayer'>Confirmar</button>
					<button data-bind='click: fecharModalCadastroPlayer'>Fechar</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		var modalCadastroPlayer = $('#modalCadastroPlayer').dialog({ autoOpen: false, dialogClass: 'no-close', modal: true, closeOnEscape: true, title: 'Cadastrar Jogador', height: 380, width: 500 });
		$(document).ready(function() {
			var isLoggedIn = (localStorage.isLoggedIn == 'true') ? true : false;
			
			if(isLoggedIn) {
				$("body").load("/players-com/pages/main.html");
			} else {
				function CadastroPlayer() {
					this.self = this;
					
					self.apelidoPlayer = ko.observable();
					self.nomePlayer = ko.observable();
					self.emailPlayer = ko.observable();
					self.senhaPlayer = ko.observable();
					
					self.fecharModalCadastroPlayer = function() {
						$( '#modalCadastroPlayer' ).dialog('close');
				   	};
				   	
					self.cadastrarPlayer = function() {
				   		var request = $.ajax({ type: 'POST', dataType : 'html', url: 'http://localhost:8080/players/cadastro/player/inserir', data: {apelido: self.apelidoPlayer(), nome: self.nomePlayer(), email: self.emailPlayer(), senha: self.senhaPlayer()}});
				   		
				   		request.done( function (callback) {
				   			if (callback == "sucesso") {
					   			$('#mensagens').fadeIn(1000);
					   			$('#mensagens').text('Player cadastrado com sucesso.');
					   			$('#mensagens').fadeOut(4000);
					   			self.apelidoPlayer('');
								self.nomePlayer('');
								self.emailPlayer('');
								self.senhaPlayer('');
					   			$( '#modalCadastroPlayer' ).dialog('close');
				   			} else {
				   				$('#mensagens').fadeIn(1000);
					   			$('#mensagens').text('Ja existe um Player cadastrado com este nome. Favor escolher outro nome.');
					   			$('#mensagens').fadeOut(4000);
				   			}
				   		});
				   	};
				   }
				
				ko.applyBindings(new CadastroPlayer(), document.getElementById("modalCadastroPlayer"));
				
				
				function ValidaLogin() {
					this.self = this;
					
					self.nomeLogin = ko.observable();
					self.senhaLogin = ko.observable();
					
					self.abrirModalCadastroPlayer = function() {
						modalCadastroPlayer.dialog('open');
					};
					
					self.validarLogin = function() {
						var request = $.ajax({ type: 'GET', dataType : 'html', url: 'http://localhost:8080/players/cadastro/player/validar', data: {email: self.nomeLogin(), senha: self.senhaLogin()}});
				   		
				   		request.done( function (callback) {
				   			if (typeof(callback)  !== "undefined") {
				   				user = $.parseJSON(callback);
				   				if(user) {
				   					localStorage.setItem('user', callback);
				   					localStorage.setItem('isLoggedIn', 'true');
				   					$("body").load("/players-com/pages/main.html");
				   				}
				   				
							} else {
								$('#mensagens').fadeIn(1000);
					   			$('#mensagens').text('Nome de usuário incorreto ou senha incorreta.');
					   			$('#mensagens').fadeOut(4000);
					   			localStorage.setItem('isLoggedIn', 'false');
							}
				   		});
					};
					
				   }
				
				ko.applyBindings(new ValidaLogin(), document.getElementById("validaLogin"));
			}
		});
	</script>
</html>